<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>短租自驾</title>
<link rel="stylesheet" href="${cxt }/css/yk_base.css" />
<link rel="stylesheet" href="${cxt }/css/yk_duan_shuan.css" />
<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="${cxt }/js/yk_myCenter_duan.js" ></script>
<script type="text/javascript" src="${cxt }/js/xw_date.js" ></script>
<script type="text/javascript">

	var order="";
	var money="";
	function getOrder(od) {
		order = od;
	}
	
	function getMoney(mo) {
		money=mo;
	}
	
	$(function(){
		
		$("[name=type_name]").click(function(){
			var a=$(this).val();
			$("[name=type_name_name]").val(a);
		})
		
		$(".subbox input").click(function(){
			$.ajax({
				url:"${cxt}/userview/myCenter/duan1",
				dataType:"json",
				data:{fromDate:$("#fromDate").val(),
					toDate:$("#toDate").val(),
					type_name:$("[name=type_name_name]").val()
				},
				success:function(data){
					$("#table").empty();
					for(var i=0;i<data.length;i++){
						$("#table").append(
							'<tr>'+
							'	<td>'+
							'		<img src="${cxt}/'+data[i].car_model_image+'" width="166" height="97"/>'+
							'	</td>'+
							'	<td>'+
							'		<b>'+data[i].car_model_name+'</b>'+
							'		<p>三厢|1.6自动|乘坐'+data[i].car_model_seating+'人</p>'+
							'		<p>订单号：'+data[i].co_id+'</p>'+
							'	</td>'+
							'	<td>'+
							'		<div class="ol-caraddress" style="cursor: default;">'+
							'			<p class="qhicon">'+
							'				<i class="zc_fetch_i"></i>'+
							'					'+data[i].store_city+'-'+data[i].store_name+''+
							'			</p>'+
							'			<p class="qhtime">'+$.getDate(data[i].time_plan_get.time)+'</p>'+
							'			<p class="qhicon">'+
							'				<i class="zc_giveback_i"></i>'+
							'					'+data[i].store_city2+'-'+data[i].store_name2+''+
							'			</p>'+
							'			<p class="qhtime">'+$.getDate(data[i].time_plan_return.time)+'</p>'+
							'		</div>'+
							'	</td>'+
							'	<td>'+
							'		<div class="ol-aggregate" style="height: 100px;">'+
							'			￥'+
							'			<span>'+data[i].co_plan_pay_money+'</span>'+
							'		</div>'+
							'	</td>'+
							'	<td>'+
							'		<span class="s-gray" style="color: #93939e;">'+data[i].co_order_status+'</span>'+
							'	</td>'+
							'</tr>'
						)
					}
				},
			})
		})
		
		$("#select").click(function () {
			$.ajax({
				url:"${cxt}/userview/myCenter/duan1",
				dataType:"json",
				data:{fromDate:$("#fromDate").val(),
					toDate:$("#toDate").val(),
					type_name:$("[name=type_name_name]").val()
				},
				success:function(data){
					$("#table").empty();
					for(var i=0;i<data.length;i++){
						$("#table").append(
							'<tr>'+
							'	<td>'+
							'		<img src="${cxt}/'+data[i].car_model_image+'" width="166" height="97"/>'+
							'	</td>'+
							'	<td>'+
							'		<b>'+data[i].car_model_name+'</b>'+
							'		<p>三厢|1.6自动|乘坐'+data[i].car_model_seating+'人</p>'+
							'		<p>订单号：'+data[i].co_id+'</p>'+
							'	</td>'+
							'	<td>'+
							'		<div class="ol-caraddress" style="cursor: default;">'+
							'			<p class="qhicon">'+
							'				<i class="zc_fetch_i"></i>'+
							'					'+data[i].store_city+'-'+data[i].store_name+''+
							'			</p>'+
							'			<p class="qhtime">'+$.getDate(data[i].time_plan_get.time)+'</p>'+
							'			<p class="qhicon">'+
							'				<i class="zc_giveback_i"></i>'+
							'					'+data[i].store_city2+'-'+data[i].store_name2+''+
							'			</p>'+
							'			<p class="qhtime">'+$.getDate(data[i].time_plan_return.time)+'</p>'+
							'		</div>'+
							'	</td>'+
							'	<td>'+
							'		<div class="ol-aggregate" style="height: 100px;">'+
							'			￥'+
							'			<span>'+data[i].co_plan_pay_money+'</span>'+
							'		</div>'+
							'	</td>'+
							'	<td>'+
							'		<span class="s-gray" style="color: #93939e;">'+data[i].co_order_status+'</span>'+
							'	</td>'+
							'</tr>'
						)
					}
				},
			})
		})
		
		$("#clear").click(function () {
			$("#fromDate").val(""),
			$("#toDate").val(""),
			$.ajax({
				url:"${cxt}/userview/myCenter/duan1",
				dataType:"json",
				data:{type_name:$("[name=type_name_name]").val()
				},
				success:function(data){
					$("#table").empty();
					for(var i=0;i<data.length;i++){
						$("#table").append(
							'<tr>'+
							'	<td>'+
							'		<img src="${cxt}/'+data[i].car_model_image+'" width="166" height="97"/>'+
							'	</td>'+
							'	<td>'+
							'		<b>'+data[i].car_model_name+'</b>'+
							'		<p>三厢|1.6自动|乘坐'+data[i].car_model_seating+'人</p>'+
							'		<p>订单号：'+data[i].co_id+'</p>'+
							'	</td>'+
							'	<td>'+
							'		<div class="ol-caraddress" style="cursor: default;">'+
							'			<p class="qhicon">'+
							'				<i class="zc_fetch_i"></i>'+
							'					'+data[i].store_city+'-'+data[i].store_name+''+
							'			</p>'+
							'			<p class="qhtime">'+$.getDate(data[i].time_plan_get.time)+'</p>'+
							'			<p class="qhicon">'+
							'				<i class="zc_giveback_i"></i>'+
							'					'+data[i].store_city2+'-'+data[i].store_name2+''+
							'			</p>'+
							'			<p class="qhtime">'+$.getDate(data[i].time_plan_return.time)+'</p>'+
							'		</div>'+
							'	</td>'+
							'	<td>'+
							'		<div class="ol-aggregate" style="height: 100px;">'+
							'			￥'+
							'			<span>'+data[i].co_plan_pay_money+'</span>'+
							'		</div>'+
							'	</td>'+
							'	<td>'+
							'		<span class="s-gray" style="color: #93939e;">'+data[i].co_order_status+'</span>'+
							'	</td>'+
							'</tr>'
						)
					}
				},
			})
		})
	
		$("[name=pay]").click(function(){
			$("#money").val(money);
			var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
			$("body").append($div);
			$("#fukuan").css("display","block");
		})
	
		$("#quxiao").click(function(){
			$("#fukuan").css("display","none");
			$(".quxiao").css("display","none");
		})
	
		$("#queding").click(function(){
			$("#fukuan").css("display","none");
			$("#fkcg").css("display","block");
		})
	
		$("#queren").click(function(){
			$("input[name=order]").val(order);
			$("#fkxx").submit();
			$("#fkcg").css("display","none");
			$(".quxiao").css("display","none");
		})
	});
</script>
<style type="text/css">
	.pay{
		width:400px;
		height:300px;
		position:absolute;
		top:0;
		left:130px;
		z-index:99;
		display:none;
		border:1px solid #dadada;
		background:#fff;
		text-align: center;
	}
	.pay .aggregate{
		height: 100px;
		margin-top:80px;
		text-align: center;
	}
	.pay .aggregate input{
		width:100px;
		text-indent:10px;
		font-size: 24px;
	}
	.pay .aggregate #money{
		width:100px;
		color: #FABE00;
		font-size: 24px;
		border: none;
	}
	.pay .qrfk{
		margin-top:20px;
	    height: 30px;
	    line-height: 30px;
	    font-size: 12px;
	    font-weight: 700;
	    width: 80px;
	    color: #fff;
	    border: none;
	    border-radius: 2px;
	    background: #6ab0ff;
	}
	.pay .qx{
	    margin-left: 20px;
	}
</style>
</head>
<body>
	<div style="width:100%;background: #F2F3F5;">
			<div class="duan">
				<div class="head">
					<span class="order" style="color:#808080 ;">自驾订单</span>
					<div class="zc_box">
						<input type="date" id="fromDate" class="w175 zc_iptcalendar"/>
						<span>-</span>
						<input type="date" id="toDate" class="w175 zc_iptcalendar"/>
						<input type="button" value="查询" class="zc_gray_sub pointer" id="select"/>
						<input type="button" value="清除" class="zc_blue_sub pointer" id="clear"/>
					</div>
					<div class="subbox fl">
						<input type="hidden" name="type_name_name">
						<input type="button" class="fl"  id="all" value="全部" name="type_name" readonly="readonly" style="background: #fabe00">
						<input type="button" class="fl"  id="wait" value="等待付款" name="type_name"  readonly="readonly">
						<input type="button" class="fl"  id="order" value="预定成功" name="type_name"  readonly="readonly">
						<input type="button" class="fl"  id="ing" value="租赁中" name="type_name"  readonly="readonly">
						<input type="button" class="fl"  id="end" value="已完成" name="type_name"  readonly="readonly">
						<input type="button" class="fl"  id="cancel" value="已取消" name="type_name"  readonly="readonly">
						<div class="cl"></div>
					</div>
					<div class="content">
						<table class="zc_table_order" cellpadding="0" cellspacing="0">
							<thead>
								<tr>
									<th class="al" width="167px">订单信息</th>
									<th width="197"></th>
									<th width="263" class="al">取/还车信息</th>
									<th width="110" class="ac">总计</th>
									<th width="100" class="ac">订单状态</th>
								</tr>
							</thead>
							<tbody id="table">
								<c:forEach items="${mycenter}" var="mycenters">
									<tr>
									<td>
										<img src="${cxt}/${mycenters.car_model_image}" width="166" height="97"/>
									</td>
									<td>
										<b>${mycenters.car_model_name}</b>
										<p>三厢|1.6自动|乘坐${mycenters.car_model_seating}人</p>
										<p>订单号：${mycenters.co_id}</p>
									</td>
									<td>
										<div class="ol-caraddress" style="cursor: default;">
											<p class="qhicon">
												<i class="zc_fetch_i"></i>
													${mycenters.store_city}-${mycenters.store_name}
											</p>
											<p class="qhtime">${mycenters.time_plan_get}</p>
											<p class="qhicon">
												<i class="zc_giveback_i"></i>
													${mycenters.store_city2}-${mycenters.store_name2}
											</p>
											<p class="qhtime">${mycenters.time_plan_return}</p>
										</div>
									</td>
									<td>
										<div class="ol-aggregate" style="height: 100px;">
											￥
											<span>${mycenters.co_plan_pay_money}</span>
											
										</div>
									</td>
									<td>
										<c:if test="${mycenters.co_order_status=='等待付款'}">
											<input type="button" value="付款" class="wyxz" id="pay" name="pay" onclick="getOrder('${mycenters.co_id}'); getMoney('${mycenters.co_plan_pay_money}');">
										</c:if>
										<span class="s-gray" style="color: #93939e;">${mycenters.co_order_status}</span>
										
									</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
					<div class="sz_page_box">
						<div class="sz_page">
							<a href="javascript:void(0)">1</a>
						</div>
					</div>
				</div>
				<div class="orderstate_bd">
					<h3>订单状态说明</h3>
					<ul>
						<li>
							<span class="s-green">预定成功</span>
							<p>订单已确认，尚未提车</p>
						</li>
						<li>
							<span class="s-orange">等待付款</span>
							<p>订单尚未付款，请在1小时内完成支付</p>
						</li>
						<li>
							<span class="s-blue">处理中</span>
							<p>您的订单已提交，正在处理中</p>
						</li>
						<li>
							<span class="s-blue">租赁中</span>
							<p>车辆正在租赁过程中</p>
						</li>
						<li>
							<span class="s-yellow">已完成</span>
							<p>已还车，订单结算完毕</p>
						</li>
						<li>
							<span class="s-grey">已取消</span>
							<p>订单已经取消</p>
						</li>
					</ul>
				</div>
				<div class="notice_bd">
					<h3>注意事项</h3>
					<p>1.修改或取消订单，请您尽早致电400 616 6666申请，送车上门或服务点订单请至少在我们的工作时间内（08:00-20:00）提前2小时修改；</p>
					<p>2. 预付订单，逾时不履行或取消的，退还您预付款中的基本保险、手续费及可选服务费款项，已付费用将作为违约金恕不退还；</p>
					<p>3. 系统将为您保留一年之内的订单，如需查询更早的订单，请致电24小时热线。</p>
				</div>
			</div>
		</div>
		<form action="${cxt }/userview/myCenter/duan1" method="post" id="fkxx">
		<div class="pay" id="fukuan">
			<div class="aggregate">
				￥<input type="text" readonly="readonly" id="money"><br><br>
				<input type="text" name="money1" id="money1">
				<input type="hidden" name="order">
			</div>
			<input class="qrfk" type="button" value="确认付款" id="queding"/>
			<input class="qrfk qx" type="button" value="取消" id="quxiao"/>
		</div>
		<div class="pay" id="fkcg">
			<br><br><br><br><br>
			<h3>付款成功！</h3><br>
			<input class="qrfk" type="submit" value="确认" id="queren"/>
		</div>
		</form>
</body>
</html>